<template>
	<div @touchstart="maxWrap()">
		<!-- 图片 -->
		<div id="preview">
			<top title="图片"></top>
			<div id="img">
				<!-- 1图片 2文字 3语音 4网址 -->
				<div class="common"
					:style="{'left':item.x+'rem','top':item.y+'rem'}"
					v-for="(item,index) in formData"
					:key="index"
					@touchstart.stop="down($event,index,item.type,item.content)"
					@touchend.stop="leave()">
					<div class="line" v-if="item.type != 5"></div>
					<div
						:style="{'backgroundImage':item.type==1?'url('+item.content+')':''}"
						:class="{text:item.type==2||item.type==4,image:item.type==1,voice:item.type==3}">
						<img src="@/assets/img/performance/msgCenter/play.png" v-if="item.type==3 && !item.click">
						<img src="@/assets/img/performance/msgCenter/play.gif" v-if="item.type==3 && item.click">
						{{item|filterType}}
					</div>
				</div>
				<div
					v-if="ifdel"
					class="del"
					:style="{left:formData[mark].x+0.5+'rem',top:formData[mark].y-0.8+'rem',backgroundImage:'url('+backImg+')'}">
						<div style="display: flex;align-items: center;margin-top: -5px;height: .6rem;">
						<span v-if="currentStatus == 1" @touchstart.stop="preview()">预览</span>
						<span v-else-if="currentStatus == 3" @touchstart.stop="playVoice()">播放</span>
						<span v-else v-clipboard:copy="formData[mark].content" v-clipboard:success="copy_success">复制</span>
					</div>
				</div>
				<!-- 背景图 -->
				<img :src="bgUrl" class="img">
				<!-- 拉伸图片 -->
				<div class="edit" v-show="showEdit" id="edit">
					<i class="top" @touchmove="pullY($event)"></i>
					<i class="right" @touchmove="pullX($event)"></i>
				</div>
			</div>
		</div>
		<!-- 按住说话 -->
		<div class="footer"
			v-if="showSpeak"
			@touchstart.stop="speakStart"
			@touchmove.stop="speakMove"
			@touchend.stop="speakEnd"
			ref="footer">
			<i :class="{red:speakText=='松开结束',blue:speakText=='按着讲话'}">{{speakText}}</i>
		</div>
		<!-- 浮窗 -->
		<transition name="bounce">
			<div class="window" v-if="ifWindow">
				<div class="handle">
					<!-- 语音 -->
					<div class="cir voice" @click.stop="ifWindow = false,showSpeak = true,speakText='按着讲话'">
						<div>
							<img src="@/assets/img/performance/msgCenter/icon_voice.png">
							<p>语音</p>
						</div>
					</div>
					<!-- 图片 -->
					<div class="cir image" @click.stop="openImage()">
						<div>
							<img src="@/assets/img/performance/msgCenter/icon_img.png">
							<p>图片</p>
						</div>
					</div>
					<!-- 文字 -->
					<div class="cir text" @click.stop="clickText('text')">
						<div>
							<img src="@/assets/img/performance/msgCenter/icon_text.png">
							<p>文字</p>
						</div>
					</div>
					<!-- 网址 -->
					<div class="cir url" @click.stop="clickText('url')">
						<div>
							<img src="@/assets/img/performance/msgCenter/icon_url.png">
							<p>网址</p>
						</div>
					</div>
				</div>
			</div>
		</transition>
		<!-- 弹出输入框 -->
		<van-popup v-model="popup">
			<div class="popup">
				<input type="text" maxlength="50" v-model="text" :placeholder="tip">
				<btn
					@click.stop.native="confirmText()"
					title="添加"
					color="#fff"
					bgcolor="#5E8EFE"
					:disabled="text?false:true"
					class="btn">
				</btn>
			</div>
		</van-popup>
		<!-- 预览图片 -->
		<van-image-preview
			v-model="showImages"
			:images="images">
		</van-image-preview>
		<!-- 显示录音图标 -->
		<div class="speak" v-if="showVoice">
			<img src="@/assets/img/performance/msgCenter/icon_voice.png">
			<p>{{speakText=='松开结束'?'正在录音':speakText}}</p>
		</div>
		<!-- 统计 -->
		<div class="statis flex flex-center-y">
			<div class="flex flex-center-y">
				<img src="@/assets/img/performance/msgCenter/icon_voice.png">
				<span>{{voiceNum}}</span>
			</div>
			<div class="flex flex-center-y">
				<img src="@/assets/img/performance/msgCenter/icon_write.png">
				<span>{{writeNum}}</span>
			</div>
		</div>
	</div>
</template>
<script>
import top from '@/components/title_bar/index.vue'
import btn from '@/components/performance/msgCenter/btn'
import {getUserLogin,getToken} from '@/utils/auth.js'
import apiConfig from '@/api/index'
export default {
	components:{
		top,
		btn
	},
    data(){
		return{
			//渲染
			formData:[
				// {
				// 	type:2,  //1图片2:文字3:语音4:网址
				// 	content:"测试文字",
				// 	x:0,
				// 	y:0
				// },
				// {
				// 	type:4,
				// 	content:"第二网址",
				// 	x:0,
				// 	y:0
				// },
				// {
				// 	type:1,
				// 	content:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1122649470,955539824&fm=27&gp=0.jpg",
				// 	x:0,
				// 	y:0,
				// 	width:100,
				// 	height:100
				// },
				// {
				// 	type:3,
				// 	content:"",
				// 	speech:53,
				// 	x:0,
				// 	y:0
				// },
			],

			//背景图片
			bgUrl:"", //网络路径

			//当前状态,1图片2:文字3:语音4:网址
			currentStatus:0,
			currentImages:"", //当前图片

			//浮窗
			ifWindow:false,

			//复制，删除
			mark:0, //当前点的是哪一个浮漂
			ifdel:false,

			//弹出输入框
			currentType:"text",  //只有两种情况text文本,url网址
			tip:"",
			text:"",
			popup:false,

			//预览图片
			showImages:false,
			images:[],

			//拖动
			flags: false,
			nx: '',
			ny: '',
			dx: '',
			dy: '',
			xPum: '',
			yPum: '',
			position: {
				x: 0,
				y: 0 ,
			},

			//冒泡背景图
			backImg:require('@/assets/img/performance/msgCenter/biubiu.png'),

			//按着说话
			timer:"", //定时器，用来计算时长
			player:"",
			voicePath:"", //录音路径
			voiceObj:null, //录音对象
			voiceLen:0,
			showSpeak:false, //true为显示按着说话
			speakText:"按住说话",
			posStart:0,//初始化起点坐标
			posEnd:0,//初始化终点坐标
			posMove:0,//初始化滑动坐标
			showVoice:false, //正在录音浮标

			//拉伸图片
			showEdit:false,
			editWidth:0, //拉伸的宽度

			//其他
			uid:"",
			userName:"",

			//toast
			toast:"",

			//统计
			voiceNum:0,
			writeNum:0,

			//长按
			pressTimer:"",
		}
	},
	watch:{
		ifdel(val){
			console.log('ifdel:' + this.ifdel);
		}
	},
	methods:{
		//加载
		list:function(){
			this.toast = this.loading('加载中');
			HTTP('edit_list',{
				uid:this.uid,
			})
			.then(res=>{
				if(res.code == 200){
					console.log(res);
					this.toast.clear();
					this.bgUrl = res.data.imageUrl; //背景图
					this.voiceNum = res.data.voiceCount; //语音数
					this.writeNum = res.data.textCount; //文本数
					if(res.data.labelLists.length>0){
						res.data.labelLists.map(o=>{
							this.formData.push({
								type:o.targerType,
								content:o.targerType==1?o.thumbnailUrl:o.content,
								x:o.placeX,
								y:o.placeY,
								width:10,
								height:10,
								speech:o.speechDuration?o.speechDuration:'',
								click:false  //true的话语音出现波纹
							});
						})
					}
					console.log(this.formData)
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//加载中
		loading:function(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
		//发送
		send:function(){
			//loading
			this.toast = this.loading('加载中');
			//拼接成后端字段,  //1图片2:文字3:语音4:网址
			let labelLists = [];
			this.formData.map(o=>{
				labelLists.push({
					targerUid:'', //图片uid
					targerType:o.type, //类型
					content:o.content, //内容
					placeX:o.x,
					placeY:o.y,
					width:o.width?o.width:'',
					height:o.height?o.height:'',
					thumbnailUrl:o.type==1?o.content:'', //缩略图
					speechDuration:o.type==3?10:'', //语音时长
					speechUrl:o.type==3?o.content:'', //语音地址
					createBy:this.userName
				});
			})
			//发请求
			HTTP('edit_send',{
				materialUid:'',
				imageUrl:this.bgUrl, //背景图
				createBy:this.userName, //创建人名称
				labelLists:labelLists,
			})
			.then(res=>{
				if(res.code == 200){
					//关闭loading
					this.toast.clear();
					//发送消息
					this.sendMsg('editImg',this.bgUrl,res.data);  //类型，背景图，编辑图片uid
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//发送消息
		sendMsg:function(type,content,uid){
			//扩展字段
			var timestamp = Date.parse(new Date()); //当前时间戳
			var id = this.$imconn.getUniqueId();    // 生成本地消息id
			var msg = new WebIM.message('txt', id); // 创建文本消息
			var obj = getUserLogin();
			var params = {
				uid:uid,
				type:type,
				name:obj.userName,
				photoUrl:obj.pictureUrl,
				content:content,
				time:timestamp,
			};
			HTTP('msg',{
				roomType:'group',
				content:content,
				userUid:this.userId,
				groupUid:this.$route.query.groupId,
				ext:JSON.stringify(params)
			})
			.then(res=>{
				if(res.code == 200){
					console.log('发送成功');
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//最外层点击事件
		maxWrap:function(){
			this.ifWindow = false;
			this.ifdel = false; //复制 删除
			this.showSpeak = false; //true为显示按着说话
			this.showEdit = false; //拉伸图片
		},
		//点击 文字/网址
		clickText:function(type){
			//text or url
			type=='text'?this.tip='请输入文字':this.tip='请输入网址';
			this.text = ''; //清空
			this.currentType = type; //text or url
			this.popup = true; //弹出输入框
			this.ifWindow = false;
		},
		//点击确认的时候,1图片 2文字 3语音 4网址
		confirmText:function(){
			//text
			if(this.currentType == 'text'){
				this.formData.push({
					type:2,
					content:this.text,
					placeX:0,
					placeY:0,
				});
			}
			//url
			else{
				this.formData.push({
					type:4,
					content:this.text,
					placeX:0,
					placeY:0,
				});
			}
			//hide
			this.popup = false;
		},
		//打开相册
		openImage:function(){
			this.ifWindow = false;
			this.loading('加载中');
			plus.gallery.pick(path=> {
				//上传
				var _this = this;
				let task = window.plus.uploader.createUpload(`${apiConfig.config.baseURL}photoEditor/photoUpload`,{
					method: 'POST',
					headers: {
						"Content-Type": "multipart/form-data"
					}
				},(data, status)=>{
					let res = (new Function("return " + data.responseText))();
					//上传完成
					if(res.code == 200){
						//拼接
						_this.$toast.clear();
						_this.formData.push({
							type:1,
							content:res.data,
							placeX:0,
							placeY:0,
						});
					}
					else{
						_this.$toast(res.msg);
					}
				})
				task.setRequestHeader('token', getToken());
				task.addFile(path, { key: 'file' }); //path为图片路径，key为后端给的字段名
				task.start(); //开始上传
			},
			{
				filter: "image"
			});
		},
		//删除
		del:function(){
			console.log(this.formData);
			this.formData.splice(this.mark,1);
			console.log(this.formData);
		},
		//点击浮标
		down:function(e,index,type,content){
			//1图片2:文字3:语音4:网址
			this.mark = index;
			this.currentStatus = type;
			//如果是图片
			if(type == 1){
				this.showEdit = false;
				this.currentImages = content;
			}
			//如果是语音
			else if(type == 3){
				this.playVoice(content,index);
			}
			//长按事件
			this.ifdel = false;
			this.pressTimer = setTimeout(()=> {
				if(this.currentStatus != 3){
					this.ifdel = true;
					clearTimeout(this.pressTimer); 
				}
			}, 1000);
		},
		//手指松开
		leave:function(){
			console.log('松开了手指');
			clearTimeout(this.pressTimer);  //清除长按定时器
		},
		//预览图片
		preview:function(){
			//没有值
			if(this.images.length == 0){
				this.images.push(this.currentImages);
				this.showImages = true;
			}
			//有值
			else{
				this.images[0] = this.currentImages;
				this.showImages = true;
			}
		},
		//拉伸图片X
		pullX:function(e){
			let oEdit = document.getElementById('edit');
			let pullWidth = e.touches[0].clientX - this.formData[this.mark].width - oEdit.offsetLeft;
			//图片拉伸
			this.formData[this.mark].width = this.formData[this.mark].width + pullWidth;
			//虚线拉伸
			oEdit.style.width = this.formData[this.mark].width + 'px';
		},
		//拉伸图片Y
		pullY:function(e){
			let oImg = document.getElementById('img');
			let oEdit = document.getElementById('edit');
			let half = img.offsetTop;
			let pullHeight = e.touches[0].clientY - this.formData[this.mark].height - oEdit.offsetTop - half; //拉伸的高度
			let MaxHeight = half + oImg.clientHeight;
			console.log(' e.touches[0].clientY:' + img.clientHeight);
			if(e.touches[0].clientY <= MaxHeight){
				//图片拉伸
				this.formData[this.mark].height = this.formData[this.mark].height + pullHeight;
				//虚线拉伸
				oEdit.style.height = this.formData[this.mark].height + 'px';
			}
		},
		//拖动
		move:function(e,n,type){
			this.currentStatus = type;
			let odiv = e.target;
			let oArea = document.getElementById('img');  //父级DOM，用来限定拖动区域
			this.nx = e.touches[0].clientX - this.position.x;
			this.ny = e.touches[0].clientY - this.position.y;
			this.xPum = this.dx + this.nx;
			this.yPum = this.dy + this.ny;

			//限制拖动区域
			let maxRight = oArea.clientWidth - odiv.clientWidth;  //父级宽度 - 本身宽度
			let maxTop = oArea.clientHeight - odiv.clientHeight;  //父级高度 - 本身高度
			let resultX =0;
			let resultY = 0;

			//如果left为0
			if(this.xPum <= 0){
				this.xPum = 0;
			}
			//如果right为0
			if(this.xPum > maxRight){
				this.xPum = maxRight;
			}
			//如果top为0
			if(this.yPum < 0){
				this.yPum = 0;
			}
			//如果bottom为0
			if(this.yPum >= maxTop){
				this.yPum = maxTop;
			}
			//移动
			odiv.style.left = this.xPum + "px";
			odiv.style.top = this.yPum + "px";
			//拼到数组里
			this.formData[n].x = this.xPum;
			this.formData[n].y = this.yPum;
			//图片拉伸的位置
			if(this.currentStatus == 1){
				let oEdit = document.getElementById('edit');
				oEdit.style.left = this.xPum + "px";
				oEdit.style.top = this.yPum + "px";
			}
		},
		//复制成功
		copy_success:function(){
			console.log('复制成功');
		},
		//开始录音
		speakStart:function(event){
			console.log('手指按下...');
			this.speakText = "松开结束";
			this.posStart = event.touches[0].pageY;
			this.showVoice = true; //显示悬浮物
			//获取时长
			this.voiceLen = 0;
			this.timer = setInterval(()=>{
				this.voiceLen++;
				console.log(this.voiceLen);
			},1000)
			//语音输入
			this.voiceObj = plus.audio.getRecorder();
			if(this.voiceObj == null){
				console.log('录音对象为空');
			}
			this.voiceObj.record( {filename:"_doc/audio/tuxiaozhu/"}, (res)=> {
				this.voicePath = res; //录音的地址
				console.log(res);
				//上传
				this.uploadVoice(this.voicePath);
			}, e=>{
				this.$toast('录音失败');
				console.log(e);
			} );
		},
		//滑动时
		speakMove:function(event){
			console.log('滑动方法...');
			this.posMove = 0;
			this.posMove = event.targetTouches[0].pageY;  //获取滑动实时坐标
			if(this.posStart - this.posMove < this.$refs.footer.clientHeight){
				console.log('松开结束');
				this.speakText = '松开结束';
				this.voiceObj.stop(); //结束录音
			}
			else{
				console.log('取消发送');
				this.speakText = '取消发送';
				this.voiceObj.stop(); //结束录音
			}
		},
		//结束录音
		speakEnd:function(event){
			console.log('手指松开...');
			clearInterval(this.timer);
			console.log('时长：' + this.voiceLen);
			this.posEnd = 0;
			this.posEnd = event.changedTouches[0].pageY; //获取终点坐标
			//发送成功
			if(this.posStart - this.posEnd < this.$refs.footer.clientHeight){
				//结束录音
				this.voiceObj.stop();
				this.showVoice = false; //隐藏悬浮物
				this.showSpeak = false;
				console.log('结束录音');
			}
			//取消发送
			else{
				this.voiceObj.stop(); //结束录音
				this.showVoice = false; //隐藏悬浮物
				this.speakText = '按住说话';
			}
		},
		//获取语音时长
		getLength:function(path){
			console.log('获取时长');
			this.player = plus.audio.createPlayer(this.voicePath);
			let len = this.player.getDuration();
			console.log('len:' + len);
		},
		//播放声音
		playVoice:function(url,n){
			//新目标
			if(this.audioUrl != url){
				console.log('新目标');
				//把之前的暂停
				if(this.player){
					this.player.stop();
				}
				this.audioUrl = url;
				this.player = plus.audio.createPlayer(url);
				this.wave(n,true);  //开启波纹
				//播放结束的回调
				this.player.play(()=>{
					console.log('播放结束的回调');
					this.player = "";
					this.audioUrl = "";
					this.wave(n,false);  //关闭波纹
				});
			}
			else{
				//如果已经暂停/停止，让它播放
				if(this.player.isPaused()){
					console.log('如果已经暂停/停止，让它播放');
					this.audioUrl = url;
					this.player = plus.audio.createPlayer(url);
					this.wave(n,true);  //开启波纹
					//播放结束的回调
					this.player.play(()=>{
						console.log('播放结束的回调');
						this.player = "";
						this.audioUrl = "";
					});
				}
				//如果正在播放中，让它停止
				else{
					console.log('如果正在播放中，让它停止');
					this.player.stop();
					this.player = "";
					this.audioUrl = "";
					this.wave(n,false);  //关闭波纹
				}
			}
		},
		//开启/结束波纹
        wave:function(n,bol){
            console.log('波纹');
            //先关闭所有波纹
            if(bol){
                this.formData.map(o=>{
                    if(o.click){
                        o.click = false;
                    }
                })
            }
            //开启/关闭
            this.formData[n].click = bol;
        },
		//上传录音
		uploadVoice:function(path){
			console.log(path);
			this.loading('加载中');
			let task = window.plus.uploader.createUpload(`${apiConfig.config.baseURL}photoEditor/photoUpload`,{
				method: 'POST',
				headers: {
					"Content-Type": "multipart/form-data"
				}
			},(data, status)=>{
				console.log(data);
				let res = (new Function("return " + data.responseText))();
				//上传完成
				if(res.code == 200){
					console.log(res);
					this.$toast.clear();
					this.formData.push({
						type:3,
						content:res.data,
						speech:this.voiceLen==0?1:this.voiceLen,
						x:0,
						y:0
					});
				}
				else{
					this.$toast(res.msg);
				}
			})
			task.setRequestHeader('token', getToken());
			task.addFile(path, { key: 'file' }); //path为图片路径，key为后端给的字段名
			task.start(); //开始上传
		},
		//上传图片
		uploadImg:function(path){
			let task = window.plus.uploader.createUpload(`${apiConfig.config.baseURL}photoEditor/photoUpload`,{
				method: 'POST',
				headers: {
					"Content-Type": "multipart/form-data"
				}
			},(data, status)=>{
				let res = (new Function("return " + data.responseText))();
				//上传完成
				if(res.code == 200){
					console.log(data);
				}
				else{
					this.$toast(res.msg);
				}
			})
			task.setRequestHeader('token', getToken());
			task.addFile(path, { key: 'file' }); //path为图片路径，key为后端给的字段名
			task.start(); //开始上传
		}
	},
	filters:{
		//1图片 2文字 3语音 4网址
		filterType:function(item){
			if(item.type == 2 || item.type == 4){
				return item.content;
			}
			else if(item.type == 3){
				return `${item.speech}''`;
			}
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		this.userName = getUserLogin().userName;
		//图片uid
		if(this.$route.query.uid){
			this.uid = this.$route.query.uid;
		}
	}
};
</script>
<style lang="scss" scoped>
	//拉伸图片
	.edit{
		position: absolute;
		top: 80px;
		left: 10px;
		width: 1rem;
		height: 1rem;
		border: 1px dashed #eee;
		box-sizing: border-box;
		i{
			position: absolute;
			display: block;
			background-color: #fff;
			border: 1px solid #666;
		}
		.top{
			width: 20px;
			height: 7px;
			bottom: -7px;
			left: calc(50% - 10px);
		}
		.right{
			width: 10px;
			height: 20px;
			top: calc(50% - 10px);
			right: -7px;
		}
	}
	//统计
	.statis{
		position: fixed;
		right: 0.4rem;
		bottom: 0.4rem;
		background-color: #5E8EFE;
		border-radius: 6px;
		color: #fff;
		padding: 12px 4px;
		.flex{
			height: 10px;
			padding: 0 10px;
		}
		.flex:nth-child(1){
			border-right: 1px solid #fff;
		}
		img{
			height: 0.3rem;
			margin-right: .1rem;
		}
	}
	#preview{
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #777;
		#img{
			position: relative;
			.img{
				display: block;
				max-width: 100%;
				max-height: calc(100vh - 3.5rem);
			}
			.common{
				position: absolute;
				color: #fff;
				z-index: 100;
				display: flex;
				align-items: center;
			}
			.line{
				position: relative;
				width: .45rem;
				height: 2px;
				background-color: rgba(37,37,37,0.6);
			}
			.line:after{
				content: '';
				position: absolute;
				left: 0;
				bottom: -3px;
				width: 6px;
				height: 6px;
				background-color: #fff;
				border-radius: 50%;
				border: 1px solid #555;
			}
			.text{
				min-width: 1.1rem;
				border-radius: 1rem;
				background-color: rgba(37,37,37,0.6);
				padding: .11rem .22rem;
				font-size: $fz-7;
			}
			.voice{
				display: flex;
				align-items: center;
				min-width: 1.1rem;
				border-radius: 1rem;
				background-color: rgba(37,37,37,0.6);
				padding: .11rem .22rem;
				font-size: $fz-7;
				img{
					height: .23rem;
					margin-right: 6px;
				}
			}
			.image{
				width: 1rem;
				height: 1rem;
				background-size: 100% 100%;
				border: 3px solid #333;
				border-radius: 4px;
			}
			.del{
				position: absolute;
				//width: 80px;
				height: 20px;
				background-size: 100% 100%;
				color: #fff;
				padding: 4px 2px 0 4px;
				height: .6rem;
				//line-height: 12px;
				z-index: 100;
				span{
					//display: inline-block;
					padding: 7px;
					//height: 0.15rem;
					//line-height: 25px;
					//margin-top: -2px;
					font-size: .22rem;
				}
				.Deline{
					display: inline-block;
					width: 1px;
					height: 8px;
					line-height: 8px;
					background-color: #eee;
				}
			}
		}
	}
	// 屁股
	.footer{
		position: fixed;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		width: 100%;
		color: $color-primary;
		padding: 0.35rem 0;
		font-size: $fz-5;
		span{
			margin-left: 2px;
		}
		i{
			font-style: normal;
		}
		.blue{
			color: $color-primary;
		}
		.red{
			color: #FF5959;
		}
	}
	// 浮窗
	.window{
		position: fixed;
		bottom: 1.5rem;
		height: 5rem;
		left: 15%;
		width: 70%;
		text-align: center;
		z-index: 100;
		.handle{
			position: relative;
			.cir{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background-color: #252525;
				opacity: 0.9;
				img{
					width: 0.4rem;
				}
				p{
					color: #eee;
					padding-top: 3px;
				}
			}
			//语音
			.voice{
				width: 1.8rem;
				height: 1.8rem;
				position: absolute;
				top:0.3rem;
				left: 50%;
				margin-left: -0.9rem;
			}
			//图片
			.image{
				width: 1.6rem;
				height: 1.6rem;
				position: absolute;
				top:1.8rem;
				left: 0;

			}
			//文字
			.text{
				width: 1.6rem;
				height: 1.6rem;
				position: absolute;
				top:1.8rem;
				right: 0;

			}
			//网址
			.url{
				width: 1.5rem;
				height: 1.5rem;
				position: absolute;
				top:3rem;
				left: 50%;
				margin-left: -0.85rem;
			}
		}
	}
	//弹出输入框
	.popup{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 6px 0;
		input{
			padding-left: 15px;;
			border: none;
		}
		.btn{
			width: 50px;
			padding: 0.14rem 0;
		}
	}
	//显示录音图标
	.speak{
		position: fixed;
		left: 50%;
		bottom: 200px;
		margin-left: -1rem;
		color: #fff;
		width: 2rem;
		background-color: #252525;
		opacity: 0.8;
		text-align: center;
		border-radius: 6px;
		padding: 0.3rem 0;
		img{
			width: 35%;
		}
		p{
			padding-top: 10px;
		}
	}
	//动画
	.bounce-enter-active {
		animation: bounce-in .5s;
	}
	.bounce-leave-active {
		//animation: bounce-in .4s reverse;
	}
	@keyframes bounce-in {
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(1.5);
		}
		100% {
			transform: scale(1);
		}
	}
</style>
